<template>
  <div class="PowerReportbox">
    <div class="leftbox">
      <CheckTree @handClick="handClick" ref="CheckTree" @chushihua="chushihua"></CheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
                <el-col :span="8" style="display: flex;margin-top: 4px;">
                  <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                    <el-radio-button label="4">总</el-radio-button>
                  </el-radio-group>
                  <el-date-picker style="flex: 1;" v-if="radio3=='1'" v-model="value1" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small"></el-date-picker>
                  <el-date-picker style="flex: 1;" v-else-if="radio3=='2'" v-model="value2" value-format="yyyy-MM" type="month" placeholder="选择月" size="small"></el-date-picker>
                  <el-date-picker style="flex: 1;" v-else-if="radio3=='3'" v-model="value3" value-format="yyyy" type="year" placeholder="选择年" size="small"></el-date-picker>
                  <el-date-picker style="flex: 1;" v-else v-model="value4" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small"></el-date-picker>
                </el-col>
                <el-col :span="16" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbody">
        <div class="title">
          <div>逆变器报表</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
        </div>
        <div class="tablebox">
          <el-table
            :data="tableData"
            :size="issize"
            border
            ref="table"
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            max-height="calc(100% - 1px)"
            height="calc(100% - 1px)"
            style="width: 100%">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              type="index"
              label="序号"
              v-if="tableData.length"
              width="80"
              fixed
              align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="电站名称"
              v-if="tableData.length"
              width="130"
              fixed
              align="center">
            </el-table-column>
              <el-table-column
                prop="inverterName"
                v-if="tableData.length"
                 width="100"
                label="逆变器">
              </el-table-column>
              <el-table-column
                prop="ratedPower"
                v-if="tableData.length"
                 width="120"
                label="额定功率(kW)">
              </el-table-column>
              <el-table-column
                :prop="item"
                width="130"
                v-for="(item,index) in timePoints"
                :key="index+1"
                align="right"
                :label="item">
              </el-table-column>
          </el-table>
        </div>
        <!-- <div class="footerfenyr">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="15"
                @current-change="gettablelist"
                :total="+totalCount">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {getlibianqireportapi} from '@/api/Photovoltaic/StatisticsReport/InverterReport'
import CheckTree from '../../analysis/component/CheckTree.vue'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    CheckTree
  },
  data() {
    return {
      radio3: '1',
      value1:'',
      value2:'',
      value3: '',
      value4:'',
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
      loading:false,
      issize: 'medium',
      totalCount:'',
      tableData: [],
      treelist: [],
      timePoints:[]
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    chushihua(val) {
      this.handClick(val)
    },
    // 树节点点击
    handClick(data) {
      this.treelist=data
      if (!data.length) {
        this.tableData = []
        this.timePoints = []
      } else {
      this.gettablelist()
     }
    },
    // 重置
    chongzhi() {
      this.radio3 = '1'
      this.gettime()
      this.gettablelist()
    },
    // 获取数据
    async gettablelist() { 
      const contrastString = []
      this.treelist.map(ele => contrastString.push(ele.id))
      const { data: { list } } = await getlibianqireportapi({
        className: this.treelist[0].name, contrastString: contrastString.join(','),dateType:this.radio3,
        dateString: this.radio3 == '1' ? this.value1 : this.radio3 == '2' ? this.value2 : this.radio3 == '3' ? this.value3 : this.value4,
      })
      this.timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].quantityList.length > 0) {
              list[i].quantityList.forEach(data => {
                this.timePoints.push(data.timeReading);
              });
              break;
          }
      }
      list.forEach(ele => {
        ele.quantityList.map(item => {
          ele[item.timeReading]=item.valueReading
        })
      })
      this.tableData = list
      this.$nextTick(()=>this.$refs.table.doLayout())
    },
         // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('mbm-microservice-biz/mbm/report/demand/exportExcel',{
        buildingId: this.buildingId, customerId: this.customerId,
        pageNo: this.pageobj.pageNo-1, pageSize: this.pageobj.pageSize,
        month:this.value2
      },'需量报表')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this,'value1',year+'-'+month+'-'+day)
      this.$set(this,'value2',year+'-'+month)
      this.$set(this, 'value3', year.toString())
      this.value4=''
    },
  },
};
</script>

<style scoped>
.PowerReportbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
    height: 100%;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    .righttop{
      height: 80px;
      padding:  20px;
      background-color: #fff;
      margin-bottom: 10px;
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .title{
        margin-bottom: 10px;
        display:flex;
        justify-content:space-between;
      }
      .tablebox{
        height: 94.5%;
        /* margin-bottom: 10px; */
      }
      .footerfenyr{
        text-align: right;
      }
    }
  }
}
</style>